<div>
    <ng-container *ngIf="expended">
        <form nz-form>
            <nz-form-item *ngIf="expended">
                <nz-form-control nzSpan="24">
                    <nz-card *ngIf="selected">
                        <nz-card-meta [nzTitle]="selected.group ? selected.group.name + '/' + selected.name : selected?.name"
                                      [nzDescription]="selected?.type"></nz-card-meta>
                        <span class="inline">{{selected?.description}}</span>
                    </nz-card>
                </nz-form-control>

            </nz-form-item>
            <nz-form-item *ngIf="actions.length > 0">
                <nz-select [(ngModel)]="selected" name="action" nzShowSearch>
                    <ng-container *ngFor="let a of actions">
                        <nz-option nzCustomContent [nzValue]="a" [nzLabel]="a.name" [nzDisabled]="a.deprecated">
                            {{a.group ? a.group.name + '/' + a.name : a.name}}
                            <span class="right floated" *ngIf="a.deprecated">
                        <i nz-icon nzType="warning" nzTheme="outline" class="orange"></i>
                                {{'common_deprecated' | translate}}
                        </span>
                        </nz-option>
                    </ng-container>
                </nz-select>
            </nz-form-item>
            <button (click)="clickCancel()" class="validButton" nz-button>Cancel</button>
            <button (click)="clickAddStep()" class="validButton ml10" nzType="primary" [disabled]="!selected" name="addStepBtn" nz-button>Add step</button>
        </form>
    </ng-container>
    <ng-container *ngIf="!expended">
        <button nz-button nzType="default" (click)="showActions()" name="addStepMenuBtn" nzBlock>
            <i nz-icon nzType="plus-square" nzTheme="outline"></i>Add Step
        </button>
    </ng-container>
</div>
